﻿@model IEnumerable<TuanAnhPersonalWeb.Models.TUANANH__ALBUM>

@{
	ViewBag.Title = "Gallery";
	Layout = "~/Views/Shared/_Layout1.cshtml";
}


<script type="text/javascript">
    var menus = $('div.menu');
    menus.eq(1).addClass('menu_selected');

</script>
<div id="slideproject">
	<div style="height: 13px"><img src="/images/module-top-bg1.png" alt="top_bgcontent"/></div>
	<div id="bg_slideproject" style="background-image: url(/images/bg_project.jpg)">
	<div style="position:absolute; margin:28px 0px 0px 25px"> <img src="/images/left_direct.png" alt="" id="left_direct" style="cursor:pointer" /></div>
	<div style="position:absolute; margin:28px 0px 0px 890px"> <img src="/images/right_direct.png" alt="" id="right_direct" style="cursor:pointer"/></div>
	<div style="position:absolute; font-weight:bold; font-style:italic; font-size:22px; margin:27px 0 0 408px; color: black; text-shadow: 1px 1px 1px gray">List Albums</div>
        <div style="margin:40px 0px 10px 80px;">
            <img src="/images/carousel-titile.gif" alt=""/>				
        </div>
	<div id="g_round_slide">
        <div id="g_slide">
            @foreach (var m in @Model)
            {
                <a class="top" id="@m.ALBUM_ID" ><img src="@m.ALBUM_THUMB" alt="" title="@m.ALBUM_TITLE"/></a>
            }
          
        </div>
        <script type="text/javascript">
            var imgs = $('#g_slide img'),
                len = imgs.length,
                totallen = len * 180,
                margin = 0;
            imgs.eq(0).addClass("g_slide_selected").css('opacity', 1);
            imgs.live('click', function () {
                imgs.each(function(index) {
                    imgs.eq(index).removeClass("g_slide_selected").css('opacity', 0.5);
                });
                $(this).addClass("g_slide_selected").css('opacity', 1);
            });
            $('#right_direct').on('click', function () {
                margin += 215;
                if (margin > totallen) margin = 0;
                $('#g_slide').animate({
                    'margin-left': -margin
                });
            });

            $('#left_direct').on('click', function () {
                margin -= 215;
                if (margin <= 0) margin = totallen - 100;
                $('#g_slide').animate({
                    'margin-left': -margin
                });
            });

            $('a.top').live('click', function () {
                var id = $(this).attr('id');
                $('#content_image').load('@Url.Action("DetailAlbum", "Gallery")', { idalbum: id });

            });

        </script>
	</div>
	</div>
	<div><img src="/images/bg_project_bottom.png" alt=""/></div>
</div>

<div style="height: 13px; margin-top: 20px"><img src="/images/module-top-bg1.png" alt="top_bgcontent"/></div>
<div id="content_image" style="background-image:url('/images/main1.png');background-repeat: repeat;">
     @Html.Action("DetailAlbum", "Gallery", new { idalbum = 1 })
</div>
<div><img src="/images/mainbody-bg-bottom1.png" alt=""/></div>

